/* eslint-disable react/jsx-pascal-case */
import React from 'react';
import { StarO , Star} from '@react-vant/icons'
const Info = () => {
    let navigate = React.$router.useNavigate();
    const [info, setInfo] = React.useState({})
    // 获取路由传参的方法
    let [searchParams] =React.$router.useSearchParams();
    // 获取路由传参的ID值
    const [id, setId] = React.useState(searchParams.get('pid'))
    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})
    // 收藏
    const [collection, setCollection] = React.useState()
    const [prev, setPrev] = React.useState()
    const [next, setNext] = React.useState()

    React.useEffect(() => {
        getInfoData()
    },[id])

    const getInfoData = async() =>{
        let data = {
            id: id,
            busid: LoginUser.id
        }

        let result = await React.$api.categoryinfo(data)
        if(result && result.code == 1){
            setInfo(result.data.info)
            setCollection(result.data.collection)
            setPrev(result.data.prev)
            setNext(result.data.next)
        }
    }

    // 收藏
    const toCollection = async() => {
        let data = {
            id: id,
            busid: LoginUser.id
        }
        if(JSON.stringify(LoginUser) === "{}"){
            React.$Vant.Notify.show({ type: 'warning', message: '未登陆，请先去登陆！',onClose: () =>{
                navigate('/business/base/login') 
            } })
            return false;
        }
        let result = await React.$api.collection(data)
        if(result && result.code == 1){
           React.$Vant.Toast.success({
                message: result.msg,
                onClose: () => {
                    getInfoData()
                }
            })
        } else {
            React.$Vant.Toast.fail({
                message: result.msg
            })
        }
    }
    

    // 收藏
    const Collection = () =>{
        if(collection){
            return(
                <>
                    <a onClick={toCollection}> <Star fontSize="20px"/>&nbsp;收藏</a>
                </>
            )
        } else {
            return(
                <>
                    <a onClick={toCollection}> <StarO fontSize="20px"/>&nbsp;未收藏</a>
                </>
            )
        }
    }

    // 上一篇prev
    const Prev = () =>{
        if(prev){
            return(
                <>
                    <p>上一篇：<a onClick={() => setId(prev.id)}>{prev.name}</a></p>
                </>
            )
        } else {
            return(
                <>
                    <p>上一篇：暂无上一章内容</p>
                </>
            )
        }
    }

    const Next = ()=>{
        if(next){
            return(
                <>
                    <p>下一篇：<a onClick={() => setId(next.id)}>{next.name}</a></p>
                </>
            )
        } else {
            return(
                <>
                    <p>下一篇：暂无下一章内容</p>
                </>
            )
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="学术详情"
                onClickLeft={() => navigate(-1)}
            />
            <div className="rem2"></div>
            <div className="xs_Xiangq">
                <div className="bt">
                    <h2>{info.name} </h2>
                    <div className="text">
                        <span>{info.createtime}</span>
                        {/* <span>发布来源：{info.type_text}</span> */}
                    </div>
                </div>
                {/* dangerouslySetInnerHTML是 React 在浏览器 DOM 中使用的替代品 相当于VUE这个命令 v-html */}
                <div className="wom_de" dangerouslySetInnerHTML={{__html: info.description}}>
                </div>
                <div className="niming_sq niming_sq_xs_xq" >
                    <Collection/>
                </div>
            </div>

            <div className="rem2"></div>
            <div className="shangxia_piab">
                <Prev/>
                <Next/>
            </div>
        </>
    )
}

export default Info;